<template lang="pug">
    li.nav-item.dropdown.no-caret
        a.nav-link.dropdown-toggle#navbarDropdownDocs(href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
            | Documentation
            font-awesome-icon.dropdown-arrow(:icon='["fas", "chevron-right"]')
        .dropdown-menu.dropdown-menu-right.animated--fade-in-up(aria-labelledby='navbarDropdownDocs')
            a.dropdown-item.py-3(href='https://docs.startbootstrap.com/sb-ui-kit-pro-vue/quickstart' target='_blank')
                .icon-stack.bg-primary-soft.text-primary.mr-4
                    font-awesome-icon(:icon='["fas", "book-open"]')
                div
                    .small.text-gray-500 Documentation
                    | Usage instructions and reference
            .dropdown-divider.m-0
            a.dropdown-item.py-3(href='https://docs.startbootstrap.com/sb-ui-kit-pro-vue/create-page' target='_blank')
                .icon-stack.bg-primary-soft.text-primary.mr-4
                    font-awesome-icon(:icon='["fas", "code"]')
                div
                    .small.text-gray-500 Create a Page
                    | Create a new component and route
            .dropdown-divider.m-0
            a.dropdown-item.py-3(href='https://docs.startbootstrap.com/sb-ui-kit-pro-vue/changelog' target='_blank')
                .icon-stack.bg-primary-soft.text-primary.mr-4
                    font-awesome-icon(:icon='["fas", "file"]')
                div
                    .small.text-gray-500 Changelog
                    | Updates and changes
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class SBProMenuDocumentation extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
